<template>
	<view style="background-color: #FFFFFF;">
		<status-bar ref='statusbar' :title='title' back='0' search='1'></status-bar>
		<scroll-view scroll-x="true" class="kite-nav" :style="{top: navHeight+'px'}" :scroll-into-view="topCurrent<4?'cl-0':'cl-'+topCurrent" :scroll-with-animation='true'>
			<view class="topTab" :id='"cl-"+index' v-for="(item,index) in onceLevel" :key="index" :class="topCategoryId == item.classify_id?'kite-classify-active':''"
			 @click="topCategoryCheck(item.classify_id,index)">
				<text class="topTabTxt" :style="{'--color': color}" :class="topCategoryId == item.classify_id?'thmeBorderBottom thmeColor':''">{{item.classify_name}}</text>
			</view>
		</scroll-view>
		<view class="kite-wrapper flex-box" :style="{height: 'calc(100vh - 200rpx - '+navHeight+'px - env(safe-area-inset-bottom))'}">
			<view class="kite-classify" v-if='secondLevel.length > 0'>
				<view class="kite-classify-names" v-for="(item,index) in secondLevel" :key="index" :class="level2Curr == item.id?'kite-classify-active':''"
				 @click="secondCategoryCheck(item.id,index)" :style="{'--color': color}">
					<view class="kite-classify-box">
						<text class="kite-classify-name">{{item.name}}
							<text class="tagNum" v-if='item.selNum'>{{item.selNum}}</text>
						</text>
					</view>
				</view>
			</view>
			<scroll-view @scrolltolower="scrolltolower" @scroll="scroll" :scroll-top="scrollTop" scroll-y="true" class="kite-classify-content flex">
				<view class="goodsListBox">
					<view class="goodsItem flex-box" v-for="(item,index) in goodsList" :key='index' @click="toGoods(item.goods_id)">
						<image class="goodsImg" @error="item.img=''" :src="item.img?imgUrl+item.img: staticUrl+'/images/imageLoading.png'"
						 mode="aspectFill"></image>
						<view class="flex">
							<view class="goodsName lines">{{item.name}}</view>
							<view class="goodsInfo lines">{{item.info}}</view>
							<view class="goodsInfo">销量：<text>{{item.sales_number}}</text></view>
							<view class="flex-box flex-between align-center" @click.stop>
								<view class="goodsPrice">{{item.price}}</view>
								<view class="goodsSpec thmeBg" :style="{'--color': color}" @click="getSpec(item.goods_id,index)" v-if='item.spec == 1'>选规格</view>
								<view class="goodsSpec flex-box align-center" v-else>
									<text class="iconfont icon-jianshao1 thmeColor" :style="{'--color': color}" v-if='item.selNum' @click="updateCart(index,item.carId,item.selNum,1)"></text>
									<text class="num" v-if='item.selNum'>{{item.selNum}}</text>
									<text class="iconfont icon-zengjia thmeColor" :style="{'--color': color}" @click="updateCart(index,item.carId,item.selNum,2,item.goods_id,item.spec,item.stock)"></text>
								</view>
							</view>
						</view>
					</view>
					<view class="DiLine" v-if='noMore'>------ 没有更多数据了 ------</view>
				</view>
				<empty v-if='noData' type='1' cat='3' :msg='"当前分类下还没有"+goodsName+"哦 ~"'></empty>
			</scroll-view>
			<view class="kite-clear"></view>
		</view>

		<view class="cartBox flex-box">
			<view class="flex numBox">共<text>{{total}}</text>元</view>
			<view class="countBtn" :style="{'--color': color}" :class="{thmeBg:cartCount > 0}" @click="edtorOrder">去结算</view>
			<view class="cart flex-box align-center" @click="lookCart">
				<text class="iconfont icon-gouwucheman"></text>
				<text class="tagNum" v-if='cartCount > 0'>{{cartCount}}</text>
			</view>
		</view>

		<view class="mask" style="z-index: 20;" v-if='showCartList' @click="showCartList = false"></view>
		<view class="cartList flex-box" :class="{active:showCartList}">
			<view class="flex-between flex-box align-center topTXt">
				<text>购物车</text>
				<text @click="delAll" v-if='cartList.length > 0'>清空</text>
			</view>
			<view class="list flex">
				<view class="item flex-box" v-for="(item,index) in cartList" :key='index'>
					<image class="goodsImg" @error="item.goodsImg=''" :src="item.goodsImg?imgUrl+item.goodsImg:staticUrl+'/images/imageLoading.png'"
					 mode="aspectFill" @click="toGoods(item.goods_id)"></image>
					<view class="flex">
						<view class="goodsName lines" @click="toGoods(item.goods_id)">{{item.goods_name}}</view>
						<view class="goodsInfo lines">{{item.operation_text}}</view>
						<view class="flex-box flex-between align-center">
							<view class="goodsPrice">{{item.price}}</view>
							<!-- <view class="goodsSpec thmeBg" :style="{'--color': color}">选规格</view> -->
							<view class="goodsSpec flex-box align-center">
								<text class="iconfont icon-jianshao1 thmeColor" :style="{'--color': color}" @click="updateCart1(index,1,item)"></text>
								<text class="num">{{item.num}}</text>
								<text class="iconfont icon-zengjia thmeColor" :style="{'--color': color}" @click="updateCart1(index,2,item)"></text>
							</view>
						</view>
					</view>
				</view>
				<!-- <view v-if='cartList.length < 1'>
					<empty style='position: relative;top: -100rpx;' type='1' cat='4' msg='购物车里空空如也 ~ '></empty>
				</view> -->
			</view>
		</view>

		<!-- 底部购买信息 start -->
		<view class="ftr_buy_info" style="z-index: 33;" v-if='isShow'>
			<text class="icon-close-f iconfont" @click="isShow = false"></text>
			<view class="ftr_buy_info_goods flex-box">
				<view class="ftr_buy_info_goods_thumb">
					<image :src="pecsMsg.img?imgUrl+pecsMsg.img:imgUrl+goodsList[opIndex].img" mode="aspectFill"></image>
				</view>
				<view class="ftr_buy_info_goods_info flex">
					<text class="goods_titles">{{pecsMsg.goods_name?pecsMsg.goods_name:goodsList[opIndex].name}}</text>
					<view class="ftr_buy_info_goods_price">
						<view>
							<view class="price2">
								￥<text class="price2_num">{{pecsMsg.price?pecsMsg.price:goodsList[opIndex].price}}</text>
								<text style="color: #999999;font-size: 20rpx;margin-left: 6rpx;">库存：{{pecsMsg.stock?pecsMsg.stock:goodsList[opIndex].stock}}</text>
							</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 规格开始 -->
			<view class="specification" v-if='specsList'>
				<view class="speci-list">
					<view class="speci-item" v-for="(item,index) in specsList" :key='index'>
						<view class="speci-title">{{item.title}}</view>
						<view class="speci-sort-list">
							<view class="speci-sort-item" v-if='item.list' v-for="(item1,index1) in item.list" :key='index1' :class="{
								speciNomal:(item.state!=true && item1.state != true)||(item.state!=false && item1.state == true) ,
								speciActive: (item.state==false && item1.state == true) || (item.state==true && item1.state == 'true_'),
								speciNone: item.state!=false && item1.state == false
							}"
							 @click="specTab(index,index1,item.state,item1.state,item1.specs_id)">
								<text>{{item1.title}}</text>
							</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 规格结束 -->
			<view class="ftr_buy_info_oper">
				<view class="ftr_buy_info_oper_h">数量</view>
				<view class="ftr_buy_info_oper_num">
					<view class="goodsSpec flex-box align-center">
						<text class="iconfont icon-jianshao1 thmeColor" :style="{'--color': color}" :class="{filter:opNum < 2}" @click="opNumber(1)"></text>
						<text class="num">{{opNum}}</text>
						<text class="iconfont icon-zengjia thmeColor" :style="{'--color': color}" :class="{filter:opNum == parseInt(pecsMsg.stock)}" @click="opNumber(2)"></text>
					</view>
				</view>
			</view>
			<view class="btn3" style="background-color: #999999;" v-if='!specs_bind_id'>确定</view>
			<view class="btn3" v-else @click="submitdoods">确定</view>
		</view>
		<view class="mask" v-if="isShow" @click="isShow = false" style="z-index: 30;"></view>
		<!-- 底部购买信息 end -->
		<showModel @cancelFunc='cancelFunc' @delOrder='delCartAll' v-if='ShowModal' :type='type'
			@certain='delCartAll'
			title='是否确定清空购物车？' 
			msg='清空后将不可恢复'
			btn1='取消' 
			btn2='清空'
		></showModel>
	</view>
</template>

<script>
	var firstIndex /*第一次选择的类别索引*/ , firstIndex1 /*第一次选择的规格索引*/ , len = 0 /*类别的长度*/ ,
		check = [] /*选择规格的ID*/ ;
	var selectOver = false,fastClick = true,
		that; /*选择结束标志 当已经选择完毕全部类别后切换某个选项时为true 此时把该项作为参考类别*/
	export default {
		props:['title'],
		data() {
			return {
				navHeight:getApp().globalData.navHeight,
				color: getApp().globalData.color,
				type: 2,
				isShow: false,
				ShowModal: false,
				showCartList: false,
				searchVal: '请输入搜索信息',
				imgUrl: this.imgUrl,
				staticUrl: this.staticUrl,
				classifyId: '',
				bid: uni.getStorageSync('bid'),
				secondLevel: [],
				onceLevel: [],
				topCategoryId: '', // 顶级分类id
				topCurrent:0, // 顶级索引
				secondCurrent:0, // 次级索引
				classifyImg: '',
				vid: uni.getStorageSync('vid'),
				
				page: 1,
				pageNum: 8,
				more: false,
				noData: false,
				level2Curr: '', // 次级分类id
				goodsList: [],
				noMore: false,
				scrollTop: 1,
				cartList: [],
				total: 0.00,
				pecsMsg: '',
				specs_bind_id: '', // 选择的规格id
				specs_bind_text: '', // 选择的规格名称
				specsList: '',
				specsPrice: '',
				specsString: '',
				specsSave: [], // 暂存规格最初列表
				opIndex: -1, // 当前操作的商品索引
				opNum: 1, // 选择规格时的规格数量
				stockShort: false, // 库存不足
				tabbarUpdate: false,
				cartCount: 0 ,// 购物车总数
				goodsName: uni.getStorageSync('startUp').nameDefinition.goodsName
			}
		},
		mounted() {
			that = this;
			// #ifdef H5
			this.H5Share()
			// #endif
		},
		created() {
			that = this;
			that.vid = uni.getStorageSync('vid');
			// that.getCart();
			that.goodsName = that.goodsName?that.goodsName:'商品'
		},
		onLoad() {
			let shopName = uni.getStorageSync('startUp').shopName
			uni.setNavigationBarTitle({
				title: shopName ? shopName : ' '
			})
		},
		onShareTimeline() {
			let shareData = uni.getStorageSync('shareData');
			let vid = uni.getStorageSync('vid');
			return {
				title: shareData.desc,
				query: {share_v_id: vid},
				imageUrl: shareData.imageUrl
			}
		},
		onShareAppMessage(option) {
			let shareData = uni.getStorageSync('shareData');
			let vid = uni.getStorageSync('vid');
			return {
				title: shareData.title,
				desc: shareData.desc,
				path: '/pages/index/index?share_v_id=' + vid,
				imageUrl: shareData.imageUrl
			}
		},
		methods: {
			submitdoods() {
				if (!this.specs_bind_id) {
					uni.showToast({
						title: '请选择规格！',
						icon: 'none'
					})
					return
				}
				this.addCart(this.opNum, this.goodsList[this.opIndex].goods_id, this.opIndex);
			},
			opNumber(type) {
				if (type == 1) {
					this.opNum = this.opNum > 1 ? this.opNum - 1 : 1
				} else {
					let stock = this.pecsMsg.stock ? this.pecsMsg.stock : this.goodsList[this.opIndex].stock;
					this.pecsMsg.stock = stock;
					if (this.opNum < parseInt(stock)) {
						this.opNum = this.opNum + 1
					} else {
						uni.showToast({
							title: '库存不足，当前最多可购买：' + stock,
							icon: 'none'
						})
					}
				}
			},
			getSpec(gid, index) { // 7、获取购物车数据
				that.opIndex = index;
				that.specs_bind_id = ''
				that.specs_bind_text = ''
				that.$http.post({
					url: '/singleSaleApi/getGoodsSpecsJson',
					data: {
						goods_id: gid,
						bid: that.bid,
					}
				}).then(res => {
					that.isShow = true;
					var data = res.data.specsList;
					// 处理规格
					if (data) {
						that.specsList = data.slice(0);
						that.specsSave = that.specsList;
						len = that.specsList.length
						that.specsString = JSON.stringify(that.specsList)
						that.specsPrice = res.data.specsPrice
					}
					fastClick = true
				})
			},
			specTab(index, index1, itemState, item1State, id) { // 类别索引 规格索引  类别状态 规格状态
				/**
				 * selectNum  选中的规格数量
				 * lastIndex/firstIndex  上一次/第一次选中的类别索引
				 * lastIndex1/firstIndex1  上一次/第一次选中的规格索引
				 * **/
				// console.log(index,index1,itemState,item1State,id,this.selectNum)
				var arr = that.specsSave;
				if (typeof check == 'string')
					check = check.split(',')
				if (itemState != true) { // 第一次选择 后面以这次选择为参考显示高不高亮
					if (itemState == false && item1State == true) { // 取消选择
						that.selectNum = that.selectNum > 1 ? that.selectNum -= 1 : 0;
						check[index] = -1;
						that.lastIndex = -1;
						firstIndex = '';
						firstIndex1 = '';
						that.specsList = arr;
					} else { // 选中某项
						if (that.lastIndex != index)
							that.selectNum = 1;
						that.lastIndex = index;
						check = [];
						check[index] = parseInt(id);
						var array = JSON.parse(that.specsString)
						array[index].list[index1].clickingState[index].list[index1].state = true;
						array[index].list[index1].clickingState[index].select = true; // 标记已选
						that.specsList = array[index].list[index1].clickingState
						firstIndex = index;
						firstIndex1 = index1;
						selectOver = false
					}
				}
				if (itemState == true) { // 选择了其他类别的想
					if (item1State == false) // 不可选项
						return
					var array = JSON.parse(that.specsString);
					if (item1State == true) { // 选中某项
						if (that.lastIndex != index) // 不同类别选中才加1 同类别不加
							that.selectNum = that.selectNum < len ? that.selectNum += 1 : len;
						if (that.selectNum != len)
							that.specsList[index].list = array[firstIndex].list[firstIndex1].clickingState[index].list
						check[index] = parseInt(id);
						that.specsList[index].select = true; // 标记已选
						// 求交集
						if (that.selectNum > 1) {
							if (that.selectNum < len) { //没选完
								that.specsList[index].list[index1].state = 'true_';
								that.specsList.forEach((item, i) => {
									if (item.select != true) { // 未选的类别
										var arr = array[index].list[index1].clickingState[i].list;
										item.list = array[firstIndex].list[firstIndex1].clickingState[i].list.slice(0);
										item.list.forEach((item_, i_) => {
											if (item_.state != arr[i_].state) { // 判断是否都为可选状态
												item_.state = false
											}
											if (item_.state == 'true_' || item_.state == true) {
												item_.state = false; // 先全部默认不可选 再去寻找可选项
												var temChk = check.slice(0);
												temChk.push(parseInt(item_.specs_id))
												temChk = temChk.sort((a, b) => {
													return a - b;
												}).join(',')
												that.specsPrice.forEach((item2) => {
													if (temChk.indexOf(item2.specs_ids) > -1) { // 第三层通过价格表寻找是否存在该规格
														item_.state = true;
													}
												})
											}
										})
									}
								})
							} else {
								// 选完了
								if (selectOver) {
									if (that.lastIndex == index) {
										that.specsList[index].list[index1].state = 'true_';
										that.specsList.forEach((item, i) => {
											if (i == index) {
												item.list.forEach((item_, i_) => {
													if (item_.state == 'true_')
														item_.state = true;
													if (i_ == index1)
														item_.state = item_.state == 'true_' ? true : 'true_'
												})
											}
										})
										selectOver = true
									} else {
										that.selectNum = 1;
										that.lastIndex = index;
										check = [];
										check[index] = parseInt(id);
										var array = JSON.parse(that.specsString)
										array[index].list[index1].clickingState[index].list[index1].state = true;
										array[index].list[index1].clickingState[index].select = true; // 标记已选
										that.specsList = array[index].list[index1].clickingState
										firstIndex = index;
										firstIndex1 = index1;
										selectOver = false
									}
								} else {
									that.specsList[index].list[index1].state = 'true_';
									that.specsList.forEach((item, i) => {
										if (i == index) {
											item.list.forEach((item_, i_) => {
												if (item_.state == 'true_')
													item_.state = true;
												if (i_ == index1)
													item_.state = item_.state == 'true_' ? true : 'true_'
											})
										}
									})
									selectOver = true
								}
							}
						}
					}
					that.lastIndex = index;
					if (item1State == 'true_') { // 取消选择
						that.selectNum = that.selectNum > 1 ? that.selectNum -= 1 : 0;
						check[index] = -1;
						that.lastIndex = -1;
						that.specsList[index].select = false; // 取消已选标记
						that.specsList[index].list[index1].state = true;
						if (that.selectNum == 1) {
							var array = JSON.parse(that.specsString)
							array[firstIndex].list[firstIndex1].clickingState[firstIndex].list[firstIndex1].state = true;
							array[firstIndex].list[firstIndex1].clickingState[firstIndex].select = true; // 标记已选
							that.specsList = array[firstIndex].list[firstIndex1].clickingState
						}
						selectOver = false;
					}
					that.lastIndex1 = index1;
				}
				if (that.selectNum == len) { // 选完了
					check = check.sort((a, b) => {
						return a - b;
					}).join(',')
					that.specsPrice.forEach((item) => {
						if (item.specs_ids == check) { // 找到对应规格的商品信息
							that.pecsMsg = item;
							that.specs_bind_id = item.id; // 选择的规格id	
							that.specs_bind_text = item.specs_title; // 选择的规格名称
							uni.setStorageSync('specs', {
								'specs_bind_id': item.id,
								'specs_bind_text': item.specs_title
							});
						}
					})
				} else {
					that.pecsMsg = '';
					that.specs_bind_id = ''; // 选择的规格id
					that.specs_bind_text = ''; // 选择的规格名称
					uni.setStorageSync('specs', {
						'specs_bind_id': '',
						'specs_bind_text': ''
					});
				}
				// console.log("当前选择的规格数："+that.selectNum)
				console.log(check)
			},
			lookCart() {
				let vid = uni.getStorageSync('vid')
				if (!vid || vid == 0) {
					that.type = 2
					that.ShowModal = true;
					return
				}
				if (that.cartCount < 1) {
					that.showCartList = false
					return
				}
				that.getCart(-1)
				that.showCartList = !that.showCartList
			},
			delAll() {
				that.type = 99
				that.ShowModal = true
			},
			delCartAll() {
				that.ShowModal = false
				that.cartList.forEach((cart, c) => {
					that.delCart(cart.car_id, -99);
				})
			},
			cancelFunc() {
				that.ShowModal = false
				that.vid = uni.getStorageSync('vid');
				that.getCart();
			},
			scroll(e) {
				// that.scrollTop = e.detail.scrollTop
			},
			edtorOrder() {
				let vid = uni.getStorageSync('vid')
				if (!vid || vid == 0) {
					that.type = 2
					that.ShowModal = true;
					return
				}
				try {
				    uni.removeStorageSync('car_id');
				} catch (e) {
				    // error
				}
				var buyState = uni.getStorageSync('buyState');
				if (buyState == 0) {
					uni.showToast({
						title: "您已无购买权限！",
						duration: 1500,
						icon: 'none'
					})
					return
				}
				// 去结算
				if (that.cartList.length > 0) {
					var adIds = [];
					that.cartList.forEach((cart, c) => {
						adIds.push(cart.car_id);
					})
					adIds = adIds.join(",");
					uni.navigateTo({
						url: '/orderPage/order/createOrder?car_id='+adIds
					})
				} else {
					uni.showToast({
						icon: 'none',
						title: '请选择'+that.goodsName+'!'
					})
				}
			},
			scrolltolower() {
				if (that.more) {
					that.page++;
					that.tabbarUpdate = false;
					that.getGoodsList()
				}
			},
			totalPrice() {
				// 计算总价
				let totals = 0;
				for (let i in that.cartList) {
					totals += parseFloat(that.cartList[i].price) * parseFloat(that.cartList[i].num);
				}
				that.total = totals.toFixed(2);
			},
			getCart(check) { // 7、获取购物车数据  check:是否重新请求数据
				that.$http.post({
					url: '/zzj_singleSaleApi/cartList',
					data: {
						v_id: uni.getStorageSync('vid'),
						bid: that.bid,
					}
				}).then(res => {
					var data = res.data;
					if(data){
						that.cartList = data
						that.cartCount = 0
						data.forEach((item)=>{
							that.cartCount += parseInt(item.num)
						})
					}else{
						that.showCartList = false
						that.cartCount = 0
						that.cartList = []
					}
					if(check != -1){
						that.topCategory();
					}
					that.totalPrice();
				})
			},
			updateCart(i, carId, number, type, goodsid, spec, stock) {
				if(!fastClick)
					return
				let vid = uni.getStorageSync('vid')
				if (!vid || vid == 0) {
					that.type = 2
					that.ShowModal = true;
					return
				}
				var buyState = uni.getStorageSync('buyState');
				if (buyState == 0) {
					uni.showToast({
						title: "您无购买权限！",
						duration: 1500,
						icon: 'none'
					})
					return
				}
				// type:  1减  2加 
				var num = number ? parseInt(number) : 1;
				if (type == 1 && num < 2) { // 删除购物车
					fastClick = false
					that.delCart(carId, i)
					return
				}
				if (type == 1 && number > 1) {
					num = num - 1
				}
				if (type == 2) {
					if(parseInt(stock) < 1){
						uni.showToast({
							title: '库存不足！',
							icon: 'none'
						})
						return
					}
					num = number ? num + 1 : num
				}
				fastClick = false
				that.specs_bind_id = ''
				that.specs_bind_text = ''
				if (carId) { // 修改购物车
					that.editCart(carId, num, i, type)
				} else { // 添加购物车
					if (spec == 1) { // 有规格
						that.getSpec(goodsid, i);
					} else {
						that.addCart(num, goodsid, i);
					}
				}
			},
			updateCart1(i, type, item) {
				// type:  1减  2加
				if(!fastClick)
					return
				var num = parseInt(item.num);
				var index = -1; // 获取当前操作商品的索引
				var secIndex = -1; // 当前操作的二级分类
				that.secondLevel.forEach((sec,s)=>{
					if(item.classify_id == sec.id){ // 是当前二级分类
						secIndex = s
						that.goodsList.forEach((goods, gg) => {
							if (goods.goods_id == item.goods_id) {
								index = gg;
							}
						})
					}else{
						
					}
				})
				if (type == 1 && num < 2) { // 删除购物车
					fastClick = false
					that.delCart(item.car_id, index)
					return
				}
				if (type == 1 && num > 1) {
					num = num - 1
				}
				if (type == 2) {
					if(parseInt(item.storeNum) < 1){
						uni.showToast({
							title: '库存不足！',
							icon: 'none'
						})
						return
					}
					num = num + 1
				}
				fastClick = false
				that.specs_bind_id = ''
				that.specs_bind_text = ''
				that.editCart(item.car_id, num, index, type, secIndex)
			},
			addCart(num, goodsid, i) { // 加入购物车
				let vid = uni.getStorageSync('vid')
				if (!vid || vid == 0) {
					that.type = 2
					that.ShowModal = true;
					return
				}
				that.$http.post({
					url: '/zzj_singleSaleApi/joinCart',
					data: {
						v_id: vid,
						num: num,
						bid: that.bid,
						specs_bind_id: that.specs_bind_id,
						specs_bind_text: that.specs_bind_text,
						goods_id: goodsid,
					}
				}).then(res => {
					if (res.errcode == 100) {
						that.goodsList[i].selNum = num;
						that.goodsList[i].carId = res.car_id;
						that.goodsList = [].concat(that.goodsList)
						that.secondLevel[that.secondCurrent].selNum += 1
						that.cartCount += 1
						that.getCart(-1)
					} else {
						uni.showToast({
							title: res.msg,
							duration: 1500,
							icon: 'none',
						})
					}
					that.isShow = false;
					fastClick = true
				})
			},
			editCart(carId, num, i, type, secIndex) { //修改购物车
				/**
				 * type:  1减  2加 
				 * secIndex: 操作的二级分类索引  -1：操作的不是当前显示的二级分类
				 * **/ 
				let vid = uni.getStorageSync('vid')
				if (!vid || vid == 0) {
					that.type = 2
					that.ShowModal = true;
					return
				}
				that.$http.post({
					url: '/zzj_singleSaleApi/incCart',
					data: {
						car_id: carId,
						v_id: vid,
						bid: that.bid,
						num: num,
					}
				}).then(res => {
					if (res.errcode == 100) {
						if (i != -1) {
							that.goodsList[i].selNum = num;
						}
						if(type == 1){ // -
							if(secIndex == -1){
								
							}
							else if(secIndex > -1){
								that.secondLevel[secIndex].selNum -= 1
								that.cartCount -= 1
							}
							else{
								that.secondLevel[that.secondCurrent].selNum -= 1
								that.cartCount -= 1
							}
						}
						if(type == 2){ // +
							if(secIndex == -1){
								
							}
							else if(secIndex > -1){
								that.secondLevel[secIndex].selNum += 1
								that.cartCount += 1
							}
							else{
								that.secondLevel[that.secondCurrent].selNum += 1
								that.cartCount += 1
							}
						}
						that.getCart(-1)
					} else {
						if(res.msg != '修改失败'){
							uni.showToast({
								title: res.msg,
								icon: 'none',
								duration: 1500
							})
						}
					}
					fastClick = true
				})
			},
			delCart(carId, i) { // 8、删除购物车
				let vid = uni.getStorageSync('vid')
				if (!vid || vid == 0) {
					that.type = 2
					that.ShowModal = true;
					return
				}
				that.$http.post({
					url: '/zzj_singleSaleApi/delCart',
					data: {
						car_id: carId,
						v_id: vid,
						bid: that.bid,
					}
				}).then(res => {
					if (res.errcode == 100) {
						if (i > -1) {
							that.goodsList[i].selNum = '';
							that.goodsList[i].carId = '';
							that.secondLevel[that.secondCurrent].selNum -= 1
							that.cartCount -= 1
						}
						if(i == -99){// 清空购物车
							that.scrollTop = 0
							that.secondLevel.forEach((second) => {
								second.selNum = 0
							})
							that.goodsList.forEach((goods, gg) => {
								goods.carId = '';
								goods.selNum = ''
							})
						}
						that.getCart(-1)
					} else {
						if(res.msg != '删除失败'){
							uni.showToast({
								title: res.msg,
								icon: 'none',
								duration: 1500
							})
						}
					}
					fastClick = true
				})
			},
			topCategory: function() { // 获取顶级分类
				that.$http.post({
					url: '/singleSaleApi/allUpList',
					data: {
						bid: that.bid,
					}
				}).then(res => {
					if (res.errcode == 100) {
						that.onceLevel = res.data;
						if (!that.topCategoryId) {
							that.topCategoryId =  res.data[0].classify_id
						}
						that.goodsType();
						that.onceLevel.forEach((e, i) => {
							if (e.classify_atlas != null && e.classify_atlas) {
								let img = e.classify_atlas;
								let atla = img.split(',')[0];
								e.classify_atlas = that.imgUrl + atla;
							} else {
								e.classify_atlas = that.staticUrl+ +'/static/images/adv.png';
							}
						})
					}
				})
			},
			secondCategoryCheck(classify_id,index){
				if(that.level2Curr != classify_id){
					that.level2Curr = classify_id
					that.secondCurrent = index
					that.scrollTop = 0;
					that.page = 1;
					that.goodsList = []
					that.getCart(-1)
					that.getGoodsList()
				}
			},
			topCategoryCheck(classify_id,index){
				if(that.topCategoryId != classify_id){
					that.secondCurrent = 0
					that.topCategoryId =  classify_id
					that.goodsList = []
					that.page = 1
					that.level2Curr = ''
					that.topCurrent = index
					that.getCart(-1)
					that.goodsType()
				}
			},
			goodsType: function() { // 获取二级分类
				that.noMore = false;
				that.$http.post({
					url: '/singleSaleApi/goodsList',
					data: {
						bid: that.bid,
						classify_id: that.topCategoryId,
					}
				}).then(res => {
					if (res.errcode == '100') {
						if(res.data && res.data.list ){
							if (that.cartList) {
								res.data.list.forEach((sec, cc) => {
									sec.selNum = 0
									that.cartList.forEach((cart, c) => {
										if (sec.id == cart.classify_id) {
											sec.selNum += parseInt(cart.num)
										}
									})
								})
							}
							that.secondLevel = res.data.list;
							var id = that.level2Curr ? that.level2Curr : res.data.list[0].id;
							that.level2Curr = id
						}else{
							that.secondLevel = []
						}
						that.getGoodsList()
					}
				})
			},
			getGoodsList: function() { // 获取商品
				that.noMore = false;
				that.more = false
				that.noData = false;
				that.$http.post({
					url: '/singleSaleApi/sortClassGoods',
					data: {
						bid: that.bid,
						page: that.page,
						v_id: uni.getStorageSync('vid'),
						pageNum: that.pageNum,
						classify_id: that.level2Curr,
						mode: 1
					}
				}).then(res => {
					if (res.code == 100 && res.data.DataArr) {
						if (that.cartList) {
							that.cartList.forEach((cart, c) => {
								res.data.DataArr.forEach((goods, gg) => {
									if (goods.goods_id == cart.goods_id) {
										goods.selNum = cart.num;
										goods.carId = cart.car_id;
									}
								})
							})
						}
						if(that.tabbarUpdate){
							that.goodsList = res.data.DataArr
						}else{
							that.goodsList = that.goodsList.concat(res.data.DataArr);
						}
						if (res.data.DataArr && res.data.DataArr.length >= that.pageNum) {
							that.more = true
						}
					}
					if ((!res.data || res.data.DataArr.length < that.pageNum) && that.goodsList.length > 0) {
						that.noMore = true
					}
					if (that.goodsList.length < 1) {
						that.noData = true;
					}
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	/* #ifdef H5 */
	.loading{height: calc(100vh - 50px);}
	/* #endif */

	.ftr_buy_info {
		bottom: calc(100rpx + constant(safe-area-inset-bottom));
		bottom: calc(100rpx + env(safe-area-inset-bottom));
		.icon-close-f{
			color: #999999;
			font-size: 44rpx;
			position: absolute;
			right: 30rpx;
			z-index: 3;
		}
	}

	.goodsItem {
		margin: 20rpx 10rpx 30rpx 20rpx;

		.goodsImg {
			width: 164rpx;
			height: 164rpx;
			margin-right: 20rpx;
			border-radius: 10rpx;
			border: 1px solid #F5F5F5;
		}
	}
	.goodsSpec {
		color: white;
		padding: 2rpx 16rpx;
		border-radius: 6rpx;
		.icon-jianshao1,.icon-zengjia{
			font-size: 40rpx;
		}
	}

	.goodsName {
		color: #232323;
		font-size: 28rpx;
		font-weight: bold;
		margin-bottom: 6rpx;
	}

	.goodsPrice {
		color: $uni-color-price;
		font-size: 30rpx;
		font-weight: bold;
		position: relative;

		&::before {
			content: '￥';
			font-size: 20rpx;
			font-weight: normal;
		}

	}

	.goodsInfo {
		color: #999999;
		font-size: 24rpx;
		margin: 4rpx 0;
		height: 32rpx;

		text {
			color: #232323;
		}
	}

	.num {
		min-width: 50rpx;
		text-align: center;
		color: #232323;
	}

	.filter {
		filter: grayscale(1);
	}

	page {
		background-color: #FFFFFF;
	}

	.cartList {
		width: 100%;
		position: fixed;
		left: 0;
		max-height: 600rpx;
		overflow-y: auto;
		bottom: -600rpx;
		transition: all 0.3s;
		background-color: white;
		padding: 24rpx;
		padding-bottom: 0;
		z-index: 21;
		flex-direction: column;
		margin-bottom: constant(safe-area-inset-bottom);
		margin-bottom: env(safe-area-inset-bottom);
		border-radius: 20rpx 20rpx 0 0;
		.list{
			overflow-y: auto;
			padding-bottom: 30rpx;
		}
		.item {
			margin-bottom: 20rpx;
		}

		.topTXt {
			color: #999;
			margin-bottom: 20rpx;
		}

		.goodsName {
			font-size: 24rpx;
			margin-bottom: 2rpx;
		}

		.goodsInfo {
			color: #999999;
			font-size: 22rpx;
			margin: 2rpx 0;

			text {
				color: #232323;
			}
		}

		.goodsPrice {
			font-size: 26rpx;
		}

		.goodsImg {
			width: 110rpx;
			height: 110rpx;
			margin-right: 10rpx;
			border-radius: 6rpx;
			border: 1px solid #F5F5F5;
		}

		&.active {
			bottom: 200rpx;
		}
	}

	.cartBox {
		bottom: 100rpx;
		margin-bottom: constant(safe-area-inset-bottom);
		margin-bottom: env(safe-area-inset-bottom);
		box-shadow: 0 0 8rpx 2px #EEEEEE;
		z-index: 22;
		height: 100rpx;
		position: fixed;
		left: 0;
		right: 0;
		background-color: #FFFFFF;
		line-height: 100rpx;
		.countBtn {
			color: white;
			width: 160rpx;
			text-align: center;
			font-size: 28rpx;
			background-color: #999;
		}

		.numBox {
			text-align: right;
			padding-right: 20rpx;
			color: #232323;
			font-size: 26rpx;
			text {
				font-size: 32rpx;
				font-weight: bold;
				margin: 0 6rpx;
				color: $uni-color-star;
			}
		}

		.cart {
			position: absolute;
			justify-content: center;
			left: 24rpx;
			top: -24rpx;
			background-color: #FFFFFF;
			.iconfont{
				font-size: 60rpx;
				color: $uni-color-star;
			}
			width: 110rpx;
			height: 110rpx;
			border-radius: 50%;
			box-shadow: 0 0 8rpx 2px #EEEEEE;
		}
	}

	.tagNum {
		position: absolute;
		background-color: $uni-color-star;
		min-width: 30rpx;
		padding: 0 2rpx;
		height: 34rpx;
		line-height: 34rpx;
		color: white;
		top: -4rpx;
		right: 0;
		text-align: center;
		border-radius: 40rpx;
		font-weight: normal;
		font-size: 22rpx;
	}

	.kite-nav {
		position: fixed;
		z-index: 10;
		overflow-y: auto;
		top: 0;
		left: 0;
		right: 0;
		box-sizing: border-box;
		white-space: nowrap;
		background-color: #FFFFFF;
		box-shadow: 0 0 8rpx 2px #EEEEEE;
	}

	.topTab {
		display: inline-block;
		line-height: 100rpx;
		padding: 0 20rpx;
	}

	.topTabTxt {
		line-height: 96rpx;
		display: inline-block;
		vertical-align: top;
		color: #666;
	}

	.kite-classify-active .topTabTxt {
		font-size: 28rpx;
		font-weight: bold;
		// color: #EC5B30;
		// border-bottom: 4rpx solid #EC5B30;
	}

	.kite-wrapper {
		margin-top: 100upx;
		width: 100%;
		height: calc(100vh - 300rpx);
		position: relative;
	}

	.kite-classify {
		width: 150rpx;
		overflow-y: auto;
		background-color: #F5F5F5;
	}

	.kite-classify-content {
		position: absolute;
		left: 150rpx;
		right: 0;
		width: calc(100% - 150rpx);
		box-sizing: border-box;
		top: 0;
		bottom: 100rpx;
	}

	.kite-classify-names {
		position: relative;
		width: 100%;
		height: 100upx;
		text-align: center;
		background-color: #F5F5F5;
		display: flex;
		align-items: center;
	}

	.kite-classify-box {
		position: absolute;
		width: 100%;
		height: 50upx;
		/* line-height: 50upx; */
		/* margin: 25upx 0; */
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.kite-classify-active {
		background-color: white;
	}

	.kite-classify-name {
		font-size: 24upx;
		font-weight: 400;
		color: #999999;
		padding: 0 10rpx;
	}

	.kite-classify-names.kite-classify-active .kite-classify-name {
		color: #333333;
		font-weight: bold;
	}

	.kite-classify-names.kite-classify-active .kite-classify-box {
		width: 100%;
		/* 	border-left-width: 6upx;
		border-left-style: solid; */
	}

	.kite-classify-warpper {
		width: 100%;
		height: 100%;
		overflow: hidden;
	}

	.kite-classify-banner {
		width: 100%;
		height: 190upx;
		border-radius: 16upx;
		overflow: hidden;
		margin: 20upx 0;
		background-color: #F5F5F5;
	}

	.kite-banner {
		width: 100%;
		height: 190upx;
	}

	.kite-search-content {
		width: 90%;
		margin: 0 5%;
	}

	.kite-goods-box {
		width: 100%;
		height: auto;
		/* padding-bottom: 20upx; */
	}

	.kite-classify-goods {
		width: 98%;
		height: 100%;
		margin: 0 auto;
		box-sizing: border-box;
		margin-bottom: 20rpx;
	}

	.kite-goods-title {
		width: 100%;
		height: 36upx;
		line-height: 36upx;
		font-size: 24upx;
		font-weight: bold;
		color: #333333;
		padding: 20upx 0 0 20upx;
	}

	.kite-goods {
		width: 100%;
		padding: 0 0 20upx 0;
		box-sizing: border-box;
		box-shadow: -2upx 2upx 6upx 0upx #F5F5F5;
	}

	.kite-goods-warpper {
		float: left;
		width: 33.3%;
		height: 216upx;
		text-align: center;
		overflow: hidden;
	}

	.kite-img-box {
		position: relative;
		width: 128upx;
		height: 180upx;
		overflow: hidden;
		margin: 0 auto;
	}

	.kite-goods-img {
		position: absolute;
		width: 120upx;
		height: 120upx;
		top: 50%;
		left: 50%;
		transform: translate3d(-50%, -50%, 0);
	}
	.goodsListBox{
		padding-bottom: 30rpx;
	}
	
	/* 规格样式 */
	.specification{
		max-height: 640upx;
		overflow-y: auto;
		overflow-x: hidden;
	}
	.speci-list{
		margin-top: 20upx;
	}
	.speci-item{
		border-bottom: 1px solid #F6F6F6;
		padding-bottom: 20upx;
		padding-top: 10upx;
	}
	.speci-title{
		color: #333;
		font-size: 28upx;
		line-height: 70upx;
	}
	.speci-sort-list{
		
	}
	.speci-sort-item{
		display: inline-block;
		margin-right: 20upx;
		margin-bottom: 20upx;
		background: #F4F4F4;
		border: 1px solid #F4F4F4;
		color: #666;
		padding: 8upx 32upx;
		border-radius: 30upx;
	}
	.speci-sort-item text{font-size: 22upx;}
	.speciActive{
		border: 1px solid #ff4b4e;
	    background: rgb(255, 240, 240);
	    color: #ff4b4e;
	}
	.speciNomal{
		color: #666;
	}
	.speciNone{
	    color: #c7c7c7;
	}
	
</style>
